<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>WebSocket示例</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="description" content="This is my page">
  </head>
  
  <body>
      <button onclick="subOpen();">open</button><br/>
      <input type="text" name="msg" id="msg"><br/>
      <button onclick="send();">发送</button>
      <div id="div"></div>
  
  </body>
  
  <script type="text/javascript">
  
//获取websocket路径  
  function getWsPath(){  
      var host = window.location.host;    //主机IP:port  
      var path = window.document.location.pathname;//端口后的路径  
      var projectName = path.substring(0,path.substr(1).indexOf("/")+1);//项目名  
      return host+projectName;  
  }
  
      var ws; // 就是一个通信管道
      var target = "ws://"+getWsPath()+"/echo";//服务端的url，注意以ws开头
      function subOpen(){
          //三个判断用于获取ws通信管道（浏览器兼容）
          if('WebSocket' in window){
              ws = new WebSocket(target);
          }else if('MozWebSocket' in window){
              ws = new MozMozWebSocket(target);
          }else{
              alert("WebSocket is not supported by this browse");
              return;
          }
          //ws.onopen = function(){}  链接开启会执行方法
          //ws.onclose = function(){}  断开连接会执行方法
          //以上两个实际用处并不多，主要是下面的
          //服务器又信息返回就执行方法
          ws.onmessage=function(event){
              //服务端一返回内容，就把该内容放到div标签当中
              document.getElementById("div").innerHTML = event.data;
              
              //方便在控制台查看返回内容的具体信息
              console.info(event);
          };
      };
      
      function send(){
          //点击发送按钮就把输入框里的内容发送给服务器，并把输入框的内容清空
          var msg = document.getElementById("msg").value;
          ws.send(msg);
          document.getElementById("msg").value = "";
      };
      
  </script>
  
</html>